<template>
  <div style="height:100%;width:100%">
    <div style="height:100%;width:100%">
      <div style="color:#fff;font-size:1.6rem;margin-bottom:3%">劳务信息登记</div>
      <!-- 登记的 -->
      <div class="content flexStart" style="margin-bottom:5%;width:100%">
        <div class="contentPart" style="margin-right:20%">
          <div class="flexCenter" style="color:#5CFFFF;font-weight: bold;font-family:Agency-FB">
            <div style="font-size:7.2rem;margin-right:0.5rem">{{contractRegisteredTotal}}</div>
            <div style="font-size:2.5rem">人</div>
          </div>
          <div style="font-size: 2rem;font-weight: bold;color: #82ACFF;text-align:center">合同已登记</div>
        </div>
        <div class="contentPart">
          <div class="flexCenter" style="color:#5CFFFF;font-weight: bold;font-family:Agency-FB">
            <div style="font-size:7.2rem;margin-right:0.5rem">{{wageCardRegisteredTotal}}</div>
            <div style="font-size:2.5rem">人</div>
          </div>
          <div style="font-size: 2rem;font-weight: bold;color: #82ACFF;text-align:center">银行卡已登记</div>
        </div>
      </div>
      <div class="diyScoll" style="overflow-x:scroll;overflow-y: hidden">
        <div style="width:300%;height:100%;margin:0 auto">
          <Echart :echartObj="echartObj" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getWageInfo } from '@/api/wageStatistics'
import { mapGetters } from 'vuex'

import echarts from 'echarts'
import Echart from '@/components/echarts/index.vue'
export default {
  components: {
    Echart
  },
  data() {
    return {
      echartObj: {},
      contractRegisteredTotal: 0,
      wageCardRegisteredTotal: 0
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      getWageInfo({ projectId: this.userInfo.projectId }).then((res) => {
        let data = res.data.data
        this.contractRegisteredTotal = data.contractRegisteredTotal
        this.wageCardRegisteredTotal = data.wageCardRegisteredTotal
        let tenderCode = []
        let personTotal = []
        let contractRegisteredTotal = []
        let wageCardRegisteredTotal = []
        let echartData = []
        let max=0
        for (let index = 0; index < data.wageInfoStatistics.length; index++) {
          echartData.push([])
          if (max<data.wageInfoStatistics[index].personTotal) {
            max=data.wageInfoStatistics[index].personTotal
          }
          for (let key in data.wageInfoStatistics[index]) {
            echartData[index].push(data.wageInfoStatistics[index][key])
          }
        }

        echartData.unshift(['name', '施工人员数量','劳务合同登记','银行卡登记情况'  ])
        // console.log(echartData)
        this.echartObj = {
          color: ['#1458B7','#0ADEFF','#58ECC4' ],
          legend: {
            left: '5%',
            textStyle: {
              color: '#fff',
              fontSize: 11
            },
            top: 0,

            padding: 0
          },
          grid: {
            left: '0',
            top: '20%',
            bottom: '5%',
            right: 0,
            containLabel: true
          },
          tooltip: {},
          dataset: {
            source: echartData
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              //   inside: true,
              textStyle: {
                color: '#fff'
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          yAxis: {
            interval: Math.round(max / 5),
            axisLabel: {
              //   inside: true,
              textStyle: {
                color: '#fff'
              }
            },
            splitLine: {
              lineStyle: { type: 'dotted' }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          series: [
            { type: 'bar', barWidth: '20%' },
            { type: 'bar', barWidth: '20%' },
            { type: 'bar', barWidth: '20%' }
          ]
        }
      })
    }
  }
}
</script>

<style scoped>
.flexCenter {
  align-items: baseline;
}
.contentPart {
  width: 40%;

  background: url('../../../../../assets/img/laborDataCenter/tjBottom.png') no-repeat 0 6.8rem;
  background-size: 100%;
}
.diyScoll {
  width: 100%;
  height: 50%;
}
.diyScoll::-webkit-scrollbar {
  width: 0.7rem;
  height: 0.7rem;
  /**/
}
.diyScoll::-webkit-scrollbar-track {
  background: #eee;

  border-radius: 0.35rem;
}
.diyScoll::-webkit-scrollbar-thumb {
  background: rgba(0, 246, 255);
  width: 1rem;
  border-radius: 0.35rem;
}
</style>